<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>

<style>

#kline-button-group .l-btn {
    color: #fff;
    background: #4AAB4A;
   
    border: none;
   
}
#kline-button-group .l-btn-selected{
    background: #E67E22;
}
#kline-button-group .l-btn:hover{
	color:#333;
    background: #0DFFAA;
}
</style>

<div class="easyui-panel" style="position:relative;height:100%;background-color:#21202D"data-options="border:false">
		<div id="kline-button-group" class="easyui-panel" style="padding:5px;border:0px;background-color:#21202D">
			<a href="javascript:renderKline('1min')" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">1分钟</a>
			<a href="javascript:renderKline('5min')" class="easyui-linkbutton" data-options="toggle:true,group:'g1',selected:true">5分钟</a>
			<a href="javascript:renderKline('15min')" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">15分钟</a>
			<a href="javascript:renderKline('30min')" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">30分钟</a>
			<a href="javascript:renderKline('60min')" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">60分钟</a>
			<a href="javascript:renderKline('1day')" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">日K</a>
			<a href="javascript:renderKline('1mon')" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">月K</a>
			<a href="javascript:renderKline('1week')" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">周K</a>
			<a href="javascript:renderKline('1year')" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">年K</a>
			<input id="symbol" class="easyui-combobox" name="symbol"   
  					data-options="valueField:'symbol',textField:'symbol',url:'../common/getLocalAllSymbols',onLoadSuccess:setValue,onSelect:getValue" /> 
  			<a href="javascript:refresh()" class="easyui-linkbutton" data-options="iconCls:'icon-reload'"></a>
		</div>
		<div id="container" style="height: 90%;width:98%;margin:0 auto;">
			
		</div>
</div>
<script type="text/javascript">

var currPeriod = '5min';
function setValue(){
	$("#symbol").combobox('select', 'btcusdt');
}

function getValue(data){
	var symbol = data.symbol;
	var param = {
			"symbol":symbol
	};
	loadKline(param);
}



function renderKline(period){
	currPeriod = period;
	var symbol = $("#symbol").val();
	var param = {
			"symbol":symbol,
			"period":period,
	};
	loadKline(param);
}

function refresh(){
	var symbol = $("#symbol").val();
	var param = {
			"symbol":symbol,
			"period":currPeriod,
	};
	loadKline(param);
}

var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = '市场行情';


function calculateMA(dayCount, data) {
    var result = [];
    for (var i = 0, len = data.length; i < len; i++) {
        if (i < dayCount) {
            result.push('-');
            continue;
        }
        var sum = 0;
        for (var j = 0; j < dayCount; j++) {
            sum += data[i - j][1];
        }
        result.push(sum / dayCount);
    }
    return result;
}


mytextStyle={
	    color:"#ddd",                           //文字颜色
	    fontStyle:"normal",                     //italic斜体  oblique倾斜
	    fontWeight:"bold",                    //文字粗细bold   bolder   lighter  100 | 200 | 300 | 400...
	    fontFamily:"sans-serif",                //字体系列
	    fontSize:18,                              //字体大小
	};

var option = {
	title: {
			text: '市场行情',
			 textStyle:mytextStyle, 
			textAlign:"center",
			 left:"center",                              //组件离容器左侧的距离,'left', 'center', 'right','20%'
			    top:"top",                                   //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
			    right:"auto",                               //组件离容器右侧的距离,'20%'
			    bottom:"auto" 
	},
    backgroundColor: '#21202D',
    legend: {
        data: ['1min','5min','15min', '30min','60min','日K','月K','周K','年K','MA5', 'MA10', 'MA20', 'MA30'],
        inactiveColor: '#777',
        top:25,
        textStyle: {
            color: '#fff'
        }
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            animation: false,
            type: 'cross',
            lineStyle: {
                color: '#376df4',
                width: 2,
                opacity: 1
            }
        },
        formatter: function (params, ticket, callback) {
        	console.log(params);
        	var content = "";
        	for(var i in params){
        		var item = params[i];
        		if(i == 0){
	        		content += item.name + "<br/>" 
        			content += item.marker + item.seriesName + ": <br/>"
        			content += item.marker + "开盘: "+item.data[1]+" <br/>";
        			content += item.marker + "收盘: "+item.data[2]+" <br/>";
        			content += item.marker + "最低: "+item.data[3]+" <br/>";
        			content += item.marker + "最高: "+item.data[4]+" <br/>";
        		}else{
        			content += item.marker + item.seriesName +": "+ item.data +"<br/>"
        		}
        	}
           	return content;
        }
    },
    toolbox: {
        feature: {
        	
            saveAsImage:{
            	type:'png',
            	show:true,
            	title:'保存为图片'
            },
            dataView:{
            	show:true,
            	title:'数据视图'
            }
        },
        itemSize: 25,
        itemGap: 20,
        right:100
        
    },
    xAxis: {
        type: 'category',
        data: null,
        axisLine: { lineStyle: { color: '#8392A5' } }
    },
    yAxis: {
        scale: true,
        axisLine: { lineStyle: { color: '#8392A5' } },
        splitLine: { show: false }
    },
    grid: {
        bottom: 80
    },
    dataZoom: [{
        textStyle: {
            color: '#8392A5'
        },
        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
        handleSize: '100%',
        dataBackground: {
            areaStyle: {
                color: '#8392A5'
            },
            lineStyle: {
                opacity: 0.8,
                color: '#8392A5'
            }
        },
        handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
        }
    }, {
        type: 'inside'
    }],
    animation: false,
    series: null
};


if (option && typeof option === "object") {
    myChart.setOption(option, true);
}

function loadKline(param){
	$.getJSON("market/getKline",param,function(res){
		/* $.messager.progress('close'); */
		if(res.status == 200){
			var list = res.data.list;
			var symbol = res.data.symbol;
			var period = res.data.period;
			switch(period){
			case "1day":
				period = "日K";
				break;
			case "1mon":
				period = "月K";
				break;
			case "1week":
				period = "周K";
				break;
			case "1year":
				period = "年K";
				break;
			}
			list = list.reverse();
			var dates = new Array();
			var dayKlines = new Array();
			for(var i in list){
				var item = list[i];
				var t = getMyDate(item.id * 1000);
				dates.push(t);
				var lineItem = new Array();
				lineItem.push(item.open);
				lineItem.push(item.close);
				lineItem.push(item.low);
				lineItem.push(item.high);
				dayKlines.push(lineItem);
			}
			
			var series = [
			            {
			                type: 'candlestick',
			                name: period,
			                data: dayKlines,
			                itemStyle: {
			                    normal: {
			                        color: '#FD1050',
			                        color0: '#0CF49B',
			                        borderColor: '#FD1050',
			                        borderColor0: '#0CF49B'
			                    }
			                }
			            } ,
			            {
			                name: 'MA5',
			                type: 'line',
			                data: calculateMA(5, dayKlines),
			                smooth: true,
			                showSymbol: false,
			                lineStyle: {
			                    normal: {
			                        width: 1
			                    }
			                }
			            },
			            {
			                name: 'MA10',
			                type: 'line',
			                data: calculateMA(10, dayKlines),
			                smooth: true,
			                showSymbol: false,
			                lineStyle: {
			                    normal: {
			                        width: 1
			                    }
			                }
			            },
			            {
			                name: 'MA20',
			                type: 'line',
			                data: calculateMA(20, dayKlines),
			                smooth: true,
			                showSymbol: false,
			                lineStyle: {
			                    normal: {
			                        width: 1
			                    }
			                }
			            },
			            {
			                name: 'MA30',
			                type: 'line',
			                data: calculateMA(30, dayKlines),
			                smooth: true,
			                showSymbol: false,
			                lineStyle: {
			                    normal: {
			                        width: 1
			                    }
			                }
			            } 
			        ];
	
			
			
			if (option && typeof option === "object") {
				option.xAxis.data = dates;
				//option.series[0].name = period;
				//option.series[0].data = dayKlines;
				option.series = series;
				
				console.log(period)
			    myChart.setOption(option, true);
			}
			
		}else{
			$.messager.alert('提示',"数据加载异常。",'info');
		}
	})
}
window.onresize = function(){
    myChart.resize();

}

//将时间戳格式化 
function getMyDate(time){
    if(typeof(time)=="undefined"){
        return "";
    }
    var oDate = new Date(time),  
     oYear = oDate.getFullYear(),  
     oMonth = oDate.getMonth()+1,  
     oDay = oDate.getDate(),  
     oHour = oDate.getHours(),  
     oMin = oDate.getMinutes(),  
     oSen = oDate.getSeconds(),  
     oTime = oYear +'-'+ getzf(oMonth) +'-'+ getzf(oDay) +' '+ getzf(oHour) +':'+ getzf(oMin) +':'+getzf(oSen);//最后拼接时间  
            
     return oTime;  
    };
    
     //补0操作,当时间数据小于10的时候，给该数据前面加一个0  
    function getzf(num){  
        if(parseInt(num) < 10){  
            num = '0'+num;  
        }  
        return num;
    }

</script> 